@import 'base.less';
.other{
	position: relative;
	overflow: hidden;
	margin: 20px 0;
    background-color: #fff;
    border: 1px solid @border-color;
    text-align: center;

    .mac-app &{
    	border: 1px solid @mac-border-color;
    }

    &__title{
    	position: absolute;
	    width: 100px;
	    height: 80px;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    margin: auto;

	    h3{
	    	color: @color-0-54;
	    }

	    &:hover{
	    	h3{
	    		color: @color-green;
	    	}

	    	.job{
				background-position: 0 -301px;
    		}
    		.read{
				background-position: 0 -501px;
    		}
    		.internet{
				background-position: 0 -401px;
    		}
    		.life{
				background-position: 0 -351px;
    		}
    		.tool{
				background-position: 0 -451px;
    		}
    		.game{
				background-position: 0 -556px;
    		}
	    }

	    &--img{
    	    width: 50px;
		    height: 50px;
		    margin: 0 auto 10px;
		    background-image: url(../static/images/icon-other-sm.png);
		    background-repeat: no-repeat;
		    background-size: 100%;

		    &.job{
				background-position: 0 0;
			}
			&.read{
				background-position: 0 -200px;
			}
			&.internet{
				background-position: 0 -100px;
			}
			&.life{
				background-position: 0 -50px;
			}
			&.tool{
				background-position: 0 -150px;
			}
			&.game{
				background-position: 0 -255px;
			}
				
	    }

    }

    &__link{
	    width: 500px;
	    padding: 10px 20px;
	    margin-left: 99px;
	    border-left: 1px solid @border-color;

	    .mac-app &{
	    	border-left: 1px solid @mac-border-color;
	    }

	    .link{
	    	padding: 0;
	    	border: 0!important;
	    	overflow: hidden;

	    	li{
    		   	width: 20%;
			    height: 30px;
			    line-height: 30px;
			    margin: 10px;
			    border: 1px solid @border-color;
			    font-size: 12px;

			    .mac-app &{
			    	border: 1px solid @mac-border-color;
			    }
	    	}
	    }
    }
}
.other:last-child li:nth-child(15){
	background-image: url("../static/images/face.png");
	background-size: cover;
			}
.other:last-child li:nth-child(16){
	background-image: url("../static/images/face.png");
	background-size: cover;
			}			

.special{
	margin-top: 20px;
	background-color: #fff;
	text-align: center;
	border: 1px solid @border-color;

	.mac-app &{
		border: 1px solid @mac-border-color;
	}
	h3{
		color: @color-0-54;
		line-height: 40px;
		border-bottom: 1px solid @border-color;

		.mac-app &{
			border-bottom: 1px solid @mac-border-color;
		}
	}

	&__box{
		padding-bottom: 5px;
		overflow: hidden;

		li {
			width : 33.333%;
			float: left;
			margin-top: 5px;

			a{
				display: block;
				color: @color-0-54;
				&:before{
					content:'';
					display: block;
					width: 30px;
					height: 30px;
					margin: 10px auto;
					background-image: url('../static/images/icon-spec.png');
					background-size: 60px;
					background-repeat: no-repeat;
				}
				&:hover{
					&:before{
						background-image: url('../static/images/icon-spec-hover.png');
					}
				}
			}
		}

		&--xcdsj{
			&:before{
				background-position: 0 0;
			}
		}

		&--jgdmx{
			&:before{
				background-position: -30px 0;
			}
		}

		&--zbchw{
			&:before{
				background-position: 0 -30px;
			}
		}

		&--xyxq{
			&:before{
				background-position: -30px -30px;
			}
		}

		&--bmjn{
			&:before{
				background-position: 0 -60px;
			}
		}

		&--xszn{
			&:before{
				background-position: -30px -60px;
			}
		}


	}
}